<template>
  <el-card v-if="data" :body-style="{ padding: '0px' }">
    <img :src="data.pic_url" @click="handleClick(data.id)" class="image">
    <div style="padding: 14px;">
      <span class="el-tag--small">{{ data.title }}</span>
      <span v-if="data.tags.length > 1">
        <el-tag size="small" style="margin-left:5px" v-for="(tag,index) in data.tags.slice(0,3)" :key="index">
          {{ tag }}
        </el-tag>
      </span>
      <span v-else>
        <el-tag size="small">
          暂无标签
        </el-tag>
      </span>
      <div class="bottom clearfix">
        <time class="time">{{ data.date }}</time>
        <el-badge class="button" :value="data.order">
          <el-button size="mini">菜谱</el-button>
        </el-badge>
        <el-badge class="button" :value="data.fans">
          <el-button size="mini">粉丝数</el-button>
        </el-badge>
        <el-badge class="button" :value="data.watch">
          <el-button size="mini">关注</el-button>
        </el-badge>
      </div>
    </div>
  </el-card>
</template>

<script>
import { mapActions } from 'vuex';
export default {
  props: {
    data: {
      default: null,
      type: Object
    }
  },
  methods: {
    handleClick(id) {
      this.setCurrentCook(id);
      this.$router.push({ name: 'detail' });
    },
    ...mapActions(['setCurrentCook'])
  }
};
</script>

<style lang="scss" scoped>
.time {
  font-size: 15px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  margin-right: 10px;
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  height: 250px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}

.clearfix:after {
  clear: both;
}
</style>
